<template>    
<div 
    class="website-item-cp border-radius_1" 
    :data-websiteid="website.websiteId"
    :data-id="website.id"
    :style="{
        padding:`${websiteTopSpace}rem ${websiteLeftSpace/2}rem 0 ${websiteLeftSpace/2}rem`,
        'opacity':websiteOpacity,
        '--iconRadius':iconRadius+'%',
        '--smallIconRadius':smallIconRadius+'%',
    }">
    <div class="all-container">
        <div 
            @click="onItem(website,false)"
            @contextmenu.prevent="onItem(website,true)"
            class="container"
            :style="{
                backgroundColor:bgColor,
                color:themeMode==='black'?'rgb(43, 45, 49)':'#f5f5f5',
            }">
            <el-image
                :class="website.defined?'img_one':'img_two'"
                :style="{
                    borderRadius:website.defined?iconRadius+'%':smallIconRadius+'%',
                }"
                :src="website.icon"
                fit="cover">
                <div slot="error" class="image_error">
                    <span>{{website.name.slice(0,1)}}</span>
                </div>
            </el-image>
        </div>
        <div 
            class="name name_ border-radius_1"
            :style="{
                color:themeMode==='black'?'#f5f5f5':'rgb(43, 45, 49)',
                '--themeColor':themeMode==='black'?'rgba(43, 45, 49, 0.5)':'rgba(255, 255, 255, 0.5)',
                '--textShadow':themeMode==='black'?'rgba(0, 0, 0, 0.12)':'rgba(255, 255, 255, 0.12)',
            }">
            {{website.name}}
        </div>
        <div 
            class="name border-radius_1"
            :style="{
                color:themeMode==='black'?'#f5f5f5':'rgb(43, 45, 49)',
                '--themeColor':themeMode==='black'?'rgba(43, 45, 49, 0.5)':'rgba(255, 255, 255, 0.5)',
                '--textShadow':themeMode==='black'?'rgba(0, 0, 0, 0.12)':'rgba(255, 255, 255, 0.12)',
            }">
            {{website.name}}
        </div>
    </div>
</div>
</template>

<script>
//主页网站item
import {getThemeColor} from"@/common/ImgThemeColor";
export default {
    name: 'WebsiteItemCp',
    props:{
        website:{
            type:Object,
            default:()=>{
                return {};
            },
        },
        searchData:{  //需要搜索的值（这里只能万不传入，能不用vuex就不用）
            type:String,
            default:'',
        },
        themeMode:{  //主题模式 浅，暗（这里只能万不传入，能不用vuex就不用）
            type:String,
            default:'white',
        },
    },
    data(){
        return {
            bgColor:"",
        };
    },
    computed:{
        websiteTopSpace(){
            return this.$store.state.config.websiteTopSpace;
        },
        websiteLeftSpace(){
            return this.$store.state.config.websiteLeftSpace;
        },
        websiteOpacity(){
            return this.$store.state.config.websiteOpacity;
        },
        iconRadius(){
            return this.$store.state.config.iconRadius;
        },
        smallIconRadius(){
            return this.$store.state.config.smallIconRadius;
        },
    },
    mounted(){
        this.getImgThemeColor();
    },
    updated(){  //当组件更新后
        this.getImgThemeColor();
    },
    methods:{
        onItem(website,e){
            if(e && website.search){ //表示鼠标右击，跳转到该网站的搜索页面中
                let search = website.search;
                let url = search.replace("{searchData}",encodeURI(this.searchData));
                window.open(url);
            }
            if(!e){
                window.open(website.link);
            }
        },
        getImgThemeColor(){ //获取img主题色
            getThemeColor(
                this.website.icon,
            ).then(themeColor=>{
                let list = themeColor.split(')');  //颜色统一加上0.95的透明度
                this.bgColor = list[0] + ', 0.95)';
            }).catch(()=>{
                this.bgColor = this.themeMode=='black'?"rgba(255, 255, 255, 0.85)":'rgba(0, 0, 0, 0.5)';
            });
        },
    },
}
</script>
<style lang="scss" scoped>
@media only screen and (max-width: 620px){  //手机
    .website-item-cp{
        margin-top: 15px;
        padding: 10px 0 !important;
        >.all-container{
            >.container{
                width: 60px;
                height: 60px;
                margin-bottom: 3px;
                .img_one{
                    width: 50px;
                    height: 50px;
                    border-radius: 50%;
                }
                .img_two{
                    width: 30px;
                    height: 30px;
                    border-radius: 3px;
                }
                i{
                    font-size: 17px;
                    font-weight: bold;
                }
                /deep/.image_error{
                    font-size: 20px;
                }
            }
            >.name{
                width: 80px;
                text-shadow: 1px 1px var(--textShadow);
                letter-spacing: 1px;
                padding: 0 3px;
                font-size: 13px;
            }
        }
    }
}
@media only screen and (min-width: 620px){  //pc
    .website-item-cp{
        >.all-container{
            >.container{
                width: 7.2rem;
                height: 7.2rem;
                margin-bottom: 1rem;
                /deep/.img_one{
                    width: 6rem;
                    height: 6rem;
                    border-radius:var(--iconRadius);
                }
                /deep/.img_two{
                    width: 4.5rem;
                    height: 4.5rem;
                    border-radius: var(--smallIconRadius);
                }
                i{
                    font-size: 2rem;
                    font-weight: bold;
                }
                /deep/.image_error{
                    font-size: 2.5rem;
                }
            }
            >.name{
                width: 12rem;
                text-shadow: 0.1rem 0.1rem var(--textShadow);
                letter-spacing: 0.1rem;
                padding: 0 0.5rem;
                font-size: 1.55rem;
            }
        }
    }
}
.website-item-cp{
    height: fit-content;
    font-weight: bold;
    line-height: 1.5;
    position: relative;
    /deep/img{  //设置图片不可选择拖动
        pointer-events: none;
    }
    >.all-container{
        width: fit-content;
        height: fit-content;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        transition: transform 0.2s;
        >.container{
            cursor: pointer;
            border-radius: var(--iconRadius);
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
            box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.35);
            background-image: radial-gradient(circle,#ffffff30,transparent);
            i{
                font-weight: bold;
            }
            /deep/.image_error{
                width: 100%;
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
            }
        }
        >.name{
            overflow: hidden;
            display: inline-block;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            color: #f5f5f5;
            box-sizing: border-box;
        }
        >.name_{
            position: absolute;
            bottom: 0;
            opacity: 0;
            width: fit-content;
        }
        &:hover{
            transform: scale(1.1) translateY(-5px);
            color: red;
            opacity: 1 !important;
            .container{
                box-shadow: 0px 4px rgba(0, 0, 0, 0.1),1px 1px 5px rgba(0, 0, 0, 0.35);
                // background-color: white !important;
                // color: rgb(37, 35, 41) !important;
            }
            .name{
                background-color:var(--themeColor) !important;
                opacity: 0;
            }
            >.name_{
                background-color:var(--themeColor) !important;
                opacity: 1;
            }
        }
    }
}
</style>

